import React, { Component } from "react";
import {
  Input,
  Button,
  Modal,
  Steps,
  message,
  Upload,
  Icon,
  Table,
} from "antd";
import LinkButton from "../../../components/link-button/index";

const { Dragger } = Upload;
const { Search } = Input;
const { Step } = Steps;
const { TextArea } = Input;

const props = {
  name: "file",
  multiple: true,
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  onChange(info) {
    const { status } = info.file;
    if (status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (status === "done") {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

class mydata extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      current: 0,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  render() {
    const columns = [
      {
        title: "项目名称",
        dataIndex: "name",
        key: "name",
        render: (text) => (
          <LinkButton
            onClick={() => {
              this.props.history.push("/project/datadetail");
            }}
          >
            {text}
          </LinkButton>
        ),
      },
      {
        title: "项目成员",
        dataIndex: "num",
        key: "num",
      },

      {
        title: "时间",
        key: "time",
        dataIndex: "time",
      },
      {
        title: "Action",
        dataIndex: "action",
        key: "action",
        render: () => <LinkButton>加入项目</LinkButton>,
      },
    ];

    const data = [
      {
        key: "1",
        name: "花样本Y特征变量",
        num: "加入项目数：" + 1,
        time: "2021-11-07-9:30",
      },
    ];
    const { current } = this.state;
    const steps = [
      {
        title: "配置数据信息",
        content: () => {
          return (
            <div>
              <p style={{ margin: "20px 5px " }}>
                <span>数据名称：</span>
                <Input style={{ width: 350, marginLeft: 5 }} />
              </p>
              <p style={{ margin: "20px 5px " }}>
                <span>数据简介：</span>
                <TextArea rows={1} style={{ width: 350, marginLeft: 5 }} />
              </p>
            </div>
          );
        },
      },
      {
        title: "配置数据",
        content: () => {
          return (
            <div>
              <span>上传文件：</span>
              <Dragger {...props}>
                <p className="ant-upload-drag-icon">
                  <Icon type="inbox" />
                </p>
                <p className="ant-upload-text">
                  点击或将文件拖拽到这里进行配置
                </p>
                <p className="ant-upload-hint">
                  支持文件CSV，以及CSV压缩成ZIP文件，最大支持100M
                </p>
              </Dragger>
            </div>
          );
        },
      },
    ];

    return (
      <div>
        <div style={{ margin: "5px" }}>
          <Search style={{ width: 300 }} />
          <Button
            type="primary"
            style={{ float: "right" }}
            onClick={this.showModal}
          >
            添加数据
          </Button>
        </div>
        <div style={{ marginTop: 20 }}>
          <Table columns={columns} dataSource={data} showHeader={false} />
        </div>
        <Modal
          title="添加数据"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div>
            <Steps current={current}>
              {steps.map((item) => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
            <div className="steps-content">{steps[current].content()}</div>
            <div className="steps-action">
              {current < steps.length - 1 && (
                <Button type="primary" onClick={() => this.next()}>
                  下一步
                </Button>
              )}
              {current === steps.length - 1 && (
                <Button
                  type="primary"
                  onClick={() => message.success("Processing complete!")}
                >
                  保存
                </Button>
              )}
              {current > 0 && (
                <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                  上一步
                </Button>
              )}
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default mydata;
